<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MarkLight is a framework for Unity that offers XUML a design language similar to HTML but instead of creating webpages it is used to design scenes in Unity.">
<meta name="keywords" content="marklight, markux, mvvm, unity, unity3d, mvm, mvp, mvc, ux, ui, user interface, user experience, interfaces, game, games, controls, widgets, xml, markup, framework, design, create, share, dream, build, play, dynamic, responsive, fluid, intuitive, easy, simple, powerful, sleek, elegant, structured, flow, creative">
<meta name="author" content="Ex Makina">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Resource Dictionaries | MarkLight</title>
<script src="../../js/html5shiv.js"></script>  <!-- support for HTML5 in IE8 -->
<!-- CSS file links -->
<link href="../../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../../css/bootstrap.icon-large.min.css" rel="stylesheet">
<link href="../../css/style-documentation.css" rel="stylesheet" type="text/css" media="all" id="styleChange" />
<link href="../../css/lightbox.css" type="text/css" rel="stylesheet" />
<link href="../../css/responsive.css" type="text/css" rel="stylesheet" />
<link href="../../css/vs.css" type="text/css" rel="stylesheet" />
<link href="../../css/font-awesome-4.5.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-76413937-1', 'auto');
  ga('send', 'pageview');

</script>

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}
</script>
</head>

<body>

    <!-- Sub-Header Start -->
    <header class="navbar navbar-fixed-top subNavBar" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
        <ul class="nav navbar-nav navbar-left subCategories">
            <li><a href="../introduction.html" class="external">Introduction</a></li>
            <li class="subCategorySelected"><a href="../tutorials.html">Tutorials</a></li>
            <li><a href="../api/MarkLight.Views.Animate.html" class="external">API docs</a></li>            
        </ul>
        <span class="slackLeftOffset"><script async defer src="https://marklight.herokuapp.com/slackin.js"></script></span>
      </div><!-- /.navbar-collapse -->
    </header>

    <!-- Header Start -->
    <header class="navbar navbar-default navbar-fixed-top mainNavBar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="http://www.marklightforunity.com/"></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="../../index.html" class="external">Home</a></li>
                    <li><a href="https://www.assetstore.unity3d.com/#!/content/37466" class="external" onclick="trackOutboundLink('https://www.assetstore.unity3d.com/#!/content/37466'); return false;">Download</a></li>
                    <li class="current"><a href="../introduction.html" class="current">Documentation</a></li>
                    <li><a href="https://www.patreon.com/studiodelight" class="external patreon"></a></li> 
                </ul>
            </div><!--/.navbar-collapse -->
      </div><!-- END Container -->
    </header><!-- END Header -->

    <!-- Documentation Start -->
    <a class="anchor" id="documentationAnchor"></a>
    <section id="documentation" class="marginSubMenu">
      <div class="container">
        <div class="row">
          <div class="col-lg-12">   
            <h1>Resource Dictionaries</h1>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-8">        

          <a class="docIndexAnchor" id="introduction"></a>
          <h2>Introduction</h2>
          Resource dictionaries can be used to define globally accessible values that can be bound to view fields using the standard <a href="data-binding.html">data binding</a> mechanism. The resource dictionary may return different values depending on global settings (language and platform) that can be changed during runtime. It's a flexible feature that can be used to do things like localization and adapt layout to different screen sizes.<br>
          <br>          

          <a class="docIndexAnchor" id="creating-dictionary"></a>
          <h2>Creating a Resource Dictionary</h2>
          A resource dictionary can be created by a XUML file having the root element <b>ResourceDictionary</b>:<br>
          <br>
          <i>Localization.xml</i>
          <pre><code class="xml">
&lt;ResourceDictionary Name="Loc" xmlns="MarkLight"&gt;
&lt;/ResourceDictionary&gt;
          </code></pre>
          <br>
          We have now created a resource dictionary called "Loc". The name you give the resource dictionary will be used when its resources are accessed in XUML. If you omit the name the resources are assigned to a default dictionary. For this example we will use the dictionary for localization. Let's continue by adding a few resources.<br>
          <br>

          <a class="docIndexAnchor" id="creating-resources"></a>
          <h2>Creating Resources</h2>
          Resources are created by adding elements with the name <b>Resource</b> to the dictionary:<br>
          <br>
          <pre><code class="xml">
&lt;ResourceDictionary Name="Loc" xmlns="MarkLight"&gt;
    <mark>&lt;Resource Key="Greeting" Value="???" /&gt;</mark>
    <mark>&lt;Resource Key="Greeting" Language="en" Value="Hello" /&gt;</mark>
    <mark>&lt;Resource Key="Greeting" Language="sv" Value="Hej" /&gt;</mark>
    <mark>&lt;Resource Key="Greeting" Language="hi" Value="Namaste" /&gt;</mark>
    <mark>&lt;Resource Key="Greeting" Language="fa" Value="Salaam" /&gt;</mark>
&lt;/ResourceDictionary&gt;
          </code></pre>
          <br>          
          Here we have created five resources with different values but with the same key: "Greeting". If we request the value for the resource with the key "Greeting" which value returned depends on the global resource dictionary settings. For example, if the language is set to "en" (English) the value "Hello" is returned, if it's set to "hi" then "Namaste" is returned, and if language isn't set then the value "???" will be returned.<br>
          <br>
          
          <a class="docIndexAnchor" id="binding-resources"></a>
          <h2>Binding to Resource Values</h2>
          You can create resource bindings in XUML using the following notation:<br>
          <br>
          <span class="inlineCode">{@DictionaryName.ResourceKey}</span> or <span class="inlineCode">{@ResourceKey}</span><br>
          <br>
          If we omit the dictionary name we access resources in the default dictionary. Here is how to bind the label text to a resource value in our localization dictionary:<br>
          <br>
          <pre><code class="xml">
&lt;LocalizationExample&gt;
    &lt;Label <mark>Text="{@Loc.Greeting}"</mark> /&gt;
&lt;/LocalizationExample&gt;
          </code></pre>
          <br>
          If you run the example you will see "???" printed. Next we'll explain how to set which settings the dictionary should use (language and platform).<br>
          <br>

          <a class="docIndexAnchor" id="configuring-dictionary"></a>
          <h2>Configuring Resource Dictionary</h2>
          The default language and platform can be set on the view presenter:<br>
          <br>
          <img src="../../images/documentation/resource-dictionaries/configure.png" class="img-responsive" alt="configure resource dictionary"><br>
          If you change the language to "en" and run the example you should see "Hello" printed in the label. You can also set these settings in code:<br>
          <br>
          <pre><code class="C#">
    public void ChangeLanguageToEnglish()
    {
        ResourceDictionary.SetConfiguration("en");
        ResourceDictionary.NotifyObservers(); // update bindings
    }
          </code></pre>
          <br>

          <a class="docIndexAnchor" id="resource-groups"></a>
          <h2>Resource Groups</h2>
          Resource groups are elements within the dictionary. Resources within the resource group inherit the parameters set on the group:<br>
          <br>
          <pre><code class="xml">
&lt;ResourceDictionary Name="Loc" xmlns="MarkLight"&gt;
    <mark>&lt;ResourceGroup Key="Greeting"&gt;</mark>
        &lt;Resource Language="en" Value="Hello" /&gt;
        &lt;Resource Language="sv" Value="Hej" /&gt;
        &lt;Resource Language="hi" Value="Namaste" /&gt;
        &lt;Resource Language="fa" Value="Salaam" /&gt;
    <mark>&lt;/ResourceGroup&gt;</mark>
&lt;/ResourceDictionary&gt;
          </code></pre>
          <br>     
          In the example above, all the resources within the group will inherit the key "Greeting". Resource groups can be used to organize your resources and make the dictionary more readable. You can nest as many resource groups as you want and you can choose which parameter to group resources by (e.g. in our localization dictionary we could group resources by language rather than key).<br>
          <br>

          <a class="docIndexAnchor" id="dynamic-resources"></a>
          <h2>Dynamic Resources</h2>
          You can work with resources during run-time. E.g. if you want to load a resource dictionary from a database, you can create resources in the dictionary using the method <b>SetResource</b>:<br>
          <br>
          <pre><code class="C#">
    public void LoadResources()
    {        
        List&lt;Resource&gt; resourcesFromDatabase =  ... // load resources from database
        foreach (var resource in resourcesFromDatabase)
        {       
            // update existing or add new resources to a dictionary
            <mark>ResourceDictionary.SetResource("MyDynamicDictionary", resource);</mark>
        }

        ResourceDictionary.NotifyObservers(); // update bindings
    }
          </code></pre>
          <br>
          Note that whenever you are done changing a dictionary you need to call <b>NotifyObservers</b> to update all resource bindings.<br>
          <br>

          <a class="docIndexAnchor" id="localization-variables"></a>
          <h2>Variables in Localized Strings</h2>
          When localizing it's not uncommon to want to inject values within a localized string. In MarkLight you can accomplish this by using resource dictionaries combined with multi bindings using a string formatter as a transformation method:<br>
          <br>
          <i>Localization.xml</i>
          <pre><code class="xml">
&lt;ResourceDictionary Name="Loc" xmlns="MarkLight"&gt;
    &lt;Resource Key="Greeting" Language="en" Value="Hello {0} {1}!" /&gt;   
&lt;/ResourceDictionary&gt;
          </code></pre>
          <br>
          <i>FormatLocalizationExample.cs</i>
          <pre><code class="xml">
&lt;FormatLocalizationExample&gt;
    &lt;Label <mark>Text="$View.Format2({@Loc.Greeting}, {FirstName}, {LastName})"</mark> /&gt;
&lt;/FormatLocalizationExample&gt;
          </code></pre>
          <br>

          <b>Format2</b> is a <a href="data-binding.html#multi-binding">static transformation method</a> that takes a format string as a parameter followed by two values to be inserted.<br>
          <br>

          <br><br><br><br>
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

          </div> <!-- END OF FIRST COLUMN -->
          <div class="col-lg-4">

              <div class="toc hidden-print hidden-xs hidden-sm" data-spy="affix" data-offset-top="115">
                <ul>
                  <li><a href="#introduction">Introduction</a></li>
                  <li><a href="#creating-dictionary">Creating a Resource Dictionary</a></li>
                  <li><a href="#creating-resources">Creating Resources</a></li>
                  <li><a href="#binding-resources">Binding to Resource Values</a></li>
                  <li><a href="#configuring-dictionary">Configuring Resource Dictionary</a></li>
                  <li><a href="#resource-groups">Resource Groups</a></li>
                  <li><a href="#dynamic-resources">Dynamic Resources</a></li>
                  <li><a href="#localization-variables">Variables in Localized Strings</a></li>
                </ul>
              </div>

          </div> <!-- END OF SECOND COLUMN -->          
        </div><!-- END OF ROW-->
      </div> <!-- END OF CONTAINER -->
    </section>


    <!-- Start subscription box -->
    <section id="promoBox">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h4><span>Join the Announcement List</span></h4>
            <p>Be notified when new themes, views, tutorials and updates are available</p>
          </div>
          <div class="col-lg-6">
            <form method="post" name="subscribeForm" id="subscribeForm" action="http://scripts.dreamhost.com/add_list.cgi">
                <input type="hidden" name="list" value="news" />
                <input type="hidden" name="domain" value="markux.com" />
                <input type="text" name="email" id="emailInput" placeholder="your email here" /> 
                <input type="submit" name="submit" id="subscribeButton" value="Subscribe" /> 
            </form>

          </div>
        </div><!-- END Row -->
      </div><!-- END container -->
    </section><!-- END Promo box -->

    <footer>
      <div class="container">
        <div class="row footer-info">
          <div class="col-lg-5">
            <img src="../../images/exmakina.png" alt="company logo" />
          </div>
          <div class="col-lg-3 contact">
            <ul>
              <li><img src="../../images/icons/footerMail.png" alt="mail icon" /><a href="mailto:contact@marklightforunity.com "> contact@marklightforunity.com </a></li> 
            </ul>                
          </div>
          <div class="col-lg-4">
            <ul class="socialIcons footer-social socialIconsOffset">
                <li><a href="https://twitter.com/MarkUX" onclick="trackOutboundLink('https://twitter.com/MarkUX'); return false;" class="twitterIcon" target="_blank"></a></li>
                <li><a href="http://www.reddit.com/r/marklight" onclick="trackOutboundLink('http://www.reddit.com/r/marklight'); return false;" class="redditIcon" target="_blank"></a></li>
                <li><span class="slackOffset"><script async defer src="https://marklight.herokuapp.com/slackin.js"></script></span></li>
            </ul>
          </div>
        </div><!-- END Row -->
      </div><!-- END Container -->
    </footer><!-- END Footer -->
    
<!-- JavaScript file links -->
<script src="../../js/jquery-1.12.3.min.js"></script>            <!-- Jquery -->
<script src="../../js/bootstrap.min.js"></script>     <!-- bootstrap -->
<script src="../../js/jquery.bxslider.min.js"></script>  <!-- bxslider -->
<script src="../../js/tabs.js"></script> <!-- custom tab script -->
<script src="../../js/lightbox-2.6.min.js"></script>  <!-- lightbox -->
<script src="../../js/jquery.scrollTo.js"></script>  <!-- scollTo -->
<script src="../../js/jquery.nav.js"></script>  <!-- one page nav -->
<script src="../../js/respond.js"></script>
<script src="../../js/highlight.pack.js"></script>

<script>
  "use strict";

$(document).ready(function() {
    hljs.initHighlightingOnLoad();
    $('.nav.navbar-nav.navbar-right').onePageNav({
        currentClass: 'current',
        filter: ':not(.external)'
    }); 
    $('span code').each(function(i, inline)
    {
      hljs.highlightBlock(inline);
    });
});
</script>

</body>
</html>
